<template>
	<div class="shangpinxiangqing">
		<div class="shangxiang1">
			<div class="shangxiang">
				<div class="shangtu">
					<img src="../../../assets/img/shangxiang.png" />
				</div>
				<div class="shangtu1">
					<p>福瑞达Dr.Alva埃尔博士玻尿福瑞达Dr.Alva埃尔博士玻尿福瑞达Dr.Alva埃尔博士玻尿...</p>
					<p>￥99.00</p>
					<p>
						<span>访客量：{{shu | guolv}}</span>
						<span>销量：{{shu | guolv}}</span>
					</p>
				</div>
				
				<div class="shuqu">
					<div class="shouye_tou1">
						<span>数据趋势</span>
					</div>
					<ul>
						<li>
							<img src="../../../assets/img/bibi.png" />
							<span>带货达人数</span>
							<span>12</span>
						</li>
						<li>
							<img src="../../../assets/img/douyin.png" />
							<span>带货视频数</span>
							<span>33</span>
						</li>
						<li>
							<img src="../../../assets/img/xiaohongshu.png" />
							<span>带货直播数</span>
							<span>17</span>
						</li>
					</ul>
				</div>
				
				<div class="shuqu1">
					<div class="shouye_tou1">
						<span>上榜次数</span>
					</div>
					<ul>
						<li>
							<img src="../../../assets/img/bibi.png" />
							<span>好物榜</span>
							<span>2次</span>
						</li>
						<li>
							<img src="../../../assets/img/douyin.png" />
							<span>销量榜</span>
							<span>12次</span>
						</li>
						<li>
							<img src="../../../assets/img/xiaohongshu.png" />
							<span>访客榜</span>
							<span>23次</span>
						</li>
						<li>
							<img src="../../../assets/img/weibo.png" />
							<span>潜力榜</span>
							<span>26次</span>
						</li>
					</ul>
				</div>
			</div>
			<div class="xiaxiang">
				<div class="shangdao">
					<ul>
						<li @click="dianji(index)" :class="[moren==index?'tianjia':'']" v-for="(item,index) in daohang" :key="index">
							{{item.name}}
						</li>
					</ul>
				</div>
				
				<div class="xiashangceng">
					<shufen v-if="moren==0"></shufen>
					<daihuo v-if="moren==1"></daihuo>
					<daipin v-if="moren==2"></daipin>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import shufen from "@/components/components/shangpinxiangqing/shujufenxi.vue"
	import daihuo from "@/components/components/shangpinxiangqing/daihuodaren.vue"
	import daipin from "@/components/components/shangpinxiangqing/daihuoshipin.vue"
	export default{
		name:"shangpinxiangqing",
		components:{
			shufen,
			daihuo,
			daipin
		},
		data(){
			return{
				shu:15131,
				moren:0,
				daohang:[
					{name:'数据分析'},{name:'带货达人'},{name:'带货视频'}
				]
			}
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		mounted(){
			var shanggao=$(".shangxiang").width();
			console.log(shanggao)
			
			$(".xiaxiang").css('height',shanggao*0.07+'rem')
		},
		methods:{
			dianji(index){
				this.moren=index;
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.shangpinxiangqing{
		
		.shangxiang1{
			border-radius:0.1rem;
			
			.shangxiang{
				width: 25%;
				float: left;
				background-color: #fff;
				border-radius:0.1rem ;
				
				.shangtu{
					img{
						width: 100%;
					}
				}
				.shangtu1{
					padding: 0.6rem;
					box-sizing: border-box;
					
					p:nth-of-type(1){
						color: #333333;
						font-size: 0.5rem;
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box; 
						-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
						-webkit-box-orient: vertical;
					}
					P:nth-of-type(2){
						color: #FF1500;
						font-size: 0.55rem;
						margin:0.6rem 0 ;
					}
					p:nth-of-type(3){
						display: flex;
						
						span{
							flex: 1;
							display: block;
							color: #999999;
							font-size: 0.4rem;
						}
						span:nth-of-type(2){
							text-align: right;
						}
					}
				}
				
				.shuqu{
					padding: 0 0.6rem;
					padding-bottom:0.6rem ;
					.shouye_tou1{
						height: 100%;
						box-sizing: border-box;
						position: relative;
						
						span{
							font-size: 0.45rem;
							display: block;
							margin-left:0.6rem ;
							margin-top:0.6rem ;
							color: #333333;
						}
						
						span::before{
							content: "";
							display: block;
							position: absolute;
							top: -0.1rem;
							left: 0;
							width: 0.2rem;
							height: 0.8rem;
							background-color: #1890FF;
						}
					}
					
					ul{
						list-style: none;
						display: flex;
						align-items: center;
						justify-content: space-between;
						text-align: center;
						margin-top:0.6rem ;
						
						li{
							img{
								width: 0.8rem;
							}
							span{
								display: block;
							}
							span:nth-of-type(1){
								color: #999;
								margin: 0.2rem 0 0.4rem 0;
								font-size: 0.4rem;
							}
							span:nth-of-type(2){
								color: #666;
								font-size: 0.45rem;
							}
						}
					}
				}
				
				.shuqu1{
					padding: 0 0.6rem;
					padding-bottom:0.6rem ;
					.shouye_tou1{
						height: 100%;
						box-sizing: border-box;
						position: relative;
						
						span{
							font-size: 0.45rem;
							display: block;
							margin-left:0.6rem ;
							margin-top:0.6rem ;
							color: #333333;
						}
						
						span::before{
							content: "";
							display: block;
							position: absolute;
							top: -0.1rem;
							left: 0;
							width: 0.2rem;
							height: 0.8rem;
							background-color: #1890FF;
						}
					}
					
					ul{
						list-style: none;
						display: flex;
						align-items: center;
						justify-content: space-between;
						text-align: center;
						flex-wrap: wrap;
						margin-top:0.6rem ;
						
						li{
							margin-bottom:0.6rem ;
							width: 50%;
							img{
								width: 0.8rem;
							}
							span{
								display: block;
							}
							span:nth-of-type(1){
								color: #999;
								margin: 0.2rem 0 0.4rem 0;
								font-size: 0.4rem;
							}
							span:nth-of-type(2){
								color: #666;
								font-size: 0.45rem;
							}
						}
					}
				}
			}
			.xiaxiang{
				float: right;
				overflow: auto;
				width: 72%;
				background-color: #fff;
				border-radius:0.1rem ;
				padding: 1rem;
				box-sizing: border-box;
				
				.shangdao{
					ul{
						list-style: none;
						li{
							float: left;
							margin-right:2.5rem ;
							cursor: pointer;
							color: #333333;
							font-size: 0.55rem;
							display: block;
							text-decoration: none;
							padding: 0.6rem 0;
						}
						.tianjia{
							color: #0091FF;
							border-bottom:2px solid #0091FF ;
						}
					}
					ul::after{
						content: "";
						display: block;
						clear: both;
					}
				}
			}
			.xiaxiang::-webkit-scrollbar{
				display: none;
			}
		}
		.shangxiang1::after{
			content: "";
			display: block;
			clear: both;
		}
	}
</style>
